<template>
    <div class="search-form-box">
        <el-form 
            :inline="true"
            @submit.prevent="submitFn"
        >
            <el-form-item label="物料编码">
                <el-input size="small" v-model="searchKey" placeholder="请输入关键字" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" :icon="Search" @click="submitFn">查询</el-button>
                <el-button size="small" :icon="Refresh" @click="resetFormFn">重置</el-button>                
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
        <div>
            <el-button type="primary" size="small" :icon="Plus" @click="addFn">新增物料</el-button>
        </div>
        <div class="table-content-box">
            <el-table 
                :data="filterTableList" 
                size="small"
                v-loading="loading"
                border>
                <el-table-column type="index" label="#" align="center" />
                <el-table-column prop="materialCode" align="center" label="物料编码"></el-table-column>
                <el-table-column prop="materialName" align="center" label="物料名称"></el-table-column>
                <el-table-column prop="materialUnit" align="center" label="物料单位"></el-table-column>
                <el-table-column prop="materialType" align="center" label="物料类型"></el-table-column>
                <el-table-column  label="操作" align="center">
                    <template #default="scope">
                        <el-button size="mini" @click="editFn(scope.$index, scope.row)">编辑</el-button>
                        <el-popconfirm 
                            title="确定要删除吗?"
                            confirmButtonText="确定"
                            cancelButtonText="取消"
                            placement="left-end"
                            @confirm="deleteProduceFn(scope.row.id)"
                        >
                            <template #reference>
                                <el-button
                                    size="mini"
                                    type="danger"                                    
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>                        
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <material-drawer :showDrawer="showDrawer" @closeDrawerFn="closeDrawerFn" @submitCallback="submitCallback"  :drawerTitle="title" ref="draweRef" />
</template>
<script>
    import {Edit, Delete, Search,Refresh,Plus } from '@element-plus/icons-vue'
    import { reactive, ref,toRefs,onMounted } from 'vue'
    import materialDrawer from './modules/materialDrawer.vue'
    import { ElMessage } from 'element-plus'
    import axios from 'axios'
    export default{
        components:{
          materialDrawer  
        },
        setup(){
            let data = reactive({
                tableData: [                                      
                ],
                showDrawer: false,
                title: '新增',
                searchKey: '',
                filterTableList: [],
                loading: false
            })
            const draweRef = ref(null)
            function submitFn(){
                // console.log('查询：'+data.searchKey)
                let list = []
                if(data.searchKey){
                    list = data.tableData.filter(item=>{
                        return item.materialCode.indexOf(data.searchKey) != -1
                    });
                }
                else{
                    list = data.tableData;
                }
                data.filterTableList = list
            }
            function resetFormFn(){
                data.searchKey = ''
                data.filterTableList = JSON.parse(JSON.stringify(data.tableData))
            }
            function addFn(){
                data.showDrawer = true
                data.title='新增'
                const _draweRef = draweRef.value
                _draweRef.isEdit = false
                // _draweRef.form = rowData
                _draweRef.afterShowDrawer({})
            }
            function editFn(index, rowData){
                data.showDrawer = true
                data.title='编辑'
                const _draweRef = draweRef.value
                 _draweRef.isEdit = true
                 _draweRef.afterShowDrawer(rowData)
                // _draweRef.form = rowData
                // console.log('draweRef', _draweRef.form)
            }
            function deleteFn(index, rowData){

            }
            function closeDrawerFn(){
                data.showDrawer = false
            }
            async function loadData(){
                data.loading  = true
                setTimeout(async ()=>{                
                    let res = await axios.get('/materialInfoList')
                    // console.log(data)
                    let list = res.data
                    if(list.success){
                        data.tableData = list.result.list
                        data.filterTableList = JSON.parse(JSON.stringify(data.tableData))
                    }
                    data.loading  = false
                }, 1000)
            }
            function submitCallback(){                
                loadData()
            }
            async function deleteProduceFn(id){
                let res = await axios.post('/deleteMaterialInfo', {id})
                let result = res.data
                if(result.success){
                    ElMessage({
                        message: result.result,
                        type: 'success',
                    })
                    loadData()
                }
                else{
                    ElMessage({
                        message: result.result,
                        type: 'error',
                    })                     
                }
            }
            onMounted(()=>{
                loadData()
            })
            
            return {               
                Edit,
                Delete,
                Refresh,
                Search,
                Plus,
                ...toRefs(data),
                draweRef,
                addFn,
                closeDrawerFn,
                submitFn,
                deleteFn,
                resetFormFn,
                editFn,
                loadData,
                submitCallback,
                deleteProduceFn
            }
        }
    }
</script>

<style lang="scss" scoped>
 .search-form-box{
     border-radius: 4px;
     background: #fff;
     padding: 10px;
 }
 .el-form--inline .el-form-item{
   margin-bottom: 0;
 }
 .table-box{
     border-radius: 4px;
     background: #fff;
     padding: 10px;
     margin-top: 10px;
     .table-content-box{
         margin-top: 10px;
     }
 }
</style>